<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 50px;
				margin-top: 20px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var div_box = document.getElementsByTagName('div')
			var timer = null; speed = 0;
			for(var i = 0;i<div_box.length;i++){
				div_box[i].onmouseover = function(){
					widthTrans(this,150)
				}
				div_box[i].onmouseout = function(){
					widthTrans(this,100)
			}
			function widthTrans(obj,end){
				//对于多物体的运动，要格外注意定时器返回值要绑定在当前对象上。
				clearInterval(obj.timer)
				obj.timer = setInterval(function(){
					speed = (end - obj.offsetWidth) / 20
					speed = end > obj.offsetWidth ? Math.ceil(speed) : Math.floor(speed) 
					if(obj.offsetWidth === end){
						clearInterval(obj.timer)
						return;
					}else{
						obj.style.width = obj.offsetWidth + speed + 'px'
					}
				},10)
			}
			}
		}
	</script>
</html>
